<template>
    <view class="equipment-main" v-if="equipment">
        <view class="equipment-head">
            <view class="thumb">
                <image :lazy-load="true" class="icon" :src="equipment.cover?equipment.cover:''" mode="widthFix"></image>
                <image class="rotate"
                    :src="equipment.is_warning === 1 || equipment.status !== 1 ? imgBaseUrlV2+ 'home_red_bg.png' :imgBaseUrlV2+ 'home_green_bg.png'"
                    mode=""></image>
            </view>

            <view class="box">
                <view class="bd">
                    <view class="title">
                        {{ equipment.name }}
                    </view>
                </view>
                <view class="ft">
                    <label :class="equipment.is_warning === 1 ||equipment.status !== 1 ? 'line-error' : 'line'">
                        {{ equipment.is_warning === 1 || equipment.status !== 1 ? "设备异常": "设备正常" }}
                    </label>
                </view>
            </view>
        </view>

        <view class="status-area" v-if="equipment.indexInfo">
            <template v-for="(status, sIndex) in equipment.indexInfo">
                <view class="item" :key="status.field_key" v-if="sIndex < 3">
                    <view class="num">{{ status.new_value }}{{ status.unit }}</view>
                    <view class="name">{{ status.display_name }}</view>
                </view>
            </template>
            <view class="item icon-item" :class="{ active: equipment.expand }">
                <image :src="imgBaseUrlV2 + 'home_arrow.png'" mode="" class="icon" />
            </view>
        </view>
    </view>
</template>

<script>
    import {
        imgBaseUrlV2,
    } from "@/common/config";

    export default {
        props: {
            equipment: {
                type: Object,
                default: null,
            },
            imgBaseUrlV2: {
                default: imgBaseUrlV2,
            },
        },
        mounted() {
            console.log(this.equipment)
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~@/common/stylus/variable';

    .equipment-main {
        flex: 1;

        >.equipment-head {
            display: flex;
            margin-bottom: 40rpx;

            >.thumb {
                position: relative;

                .icon {
                    display: block;
                    width: 112rpx;
                    height: 112rpx !important;
                    border-radius: 50%;
                    margin: 30rpx 0 0 15rpx;
                    position: relative;
                    z-index: 3;
                }

                .rotate {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 1;
                    display: block;
                    width: 140rpx;
                    height: 140rpx !important;
                    border-radius: 50%;
                    animation: rotate 2s infinite linear forwards;
                }

                margin-right: 16rpx;
            }

            .box {
                >.bd {
                    position: relative;
                    flex: 1;

                    .title {
                        font-size: 27rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: bold;
                        color: color-white;
                        // padding: 0 16rpx;
                        margin-left: 20rpx
                    }

                    .desc {
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: color-white;
                        line-height: 40rpx;
                    }
                }

                .line-error {
                    display: inline-block;
                    min-width: 120rpx;
                    font-weight: 500;
                    text-align: center;
                    font-size: 24rpx;
                    color: #CD3833;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: rgba(205, 56, 51, 0.5);
                    border-radius: 4rpx;
                    padding: 0 16rpx;
                    border: none;
                    margin-left: 20rpx;
                }

                .line {
                    display: inline-block;
                    min-width: 120rpx;
                    font-weight: 500;
                    text-align: center;
                    font-size: 24rpx;
                    color: #fff;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: rgba(77, 192, 82, 1);
                    border-radius: 4rpx;
                    padding: 0 16rpx;
                    border: none;
                    margin-left: 20rpx;
                }

                >.ft {
                    flex: 0 0 auto;
                    margin-top: 20rpx 
                    >.icon {
                        display: block;
                        width: 44rpx;
                        height: 44rpx;
                    }
                }
            }
        }

        .line {
            font-size: 28rpx;
            line-height: 50rpx;
            color: #333;
            font-weight: 400;
            font-family: PingFangSC-Regular, PingFang SC;

            .icon {
                width: 26rpx;
                vertical-align: middle;
                margin-right: 14rpx;
                margin-top: -4rpx;
            }
        }
    }

    @keyframes rotate {
        from {
            transform: rotate(0);
        }

        to {
            transform: rotate(359deg);
        }
    }

    .status-area {
        display: flex;
        background: #F9FCFF;
        border-radius: 2rpx;

        >.item {
            flex: 1;
            align-items: center;
            text-align: center;
            padding: 20rpx 12rpx;

            &.icon-item {
                display: flex;
                flex: 0 0 auto;
                align-items: center;
            }

            &.active>.icon {
                transform: rotate(90deg);
            }

            >.icon {
                display: block;
                width: 56rpx;
                height: 56rpx;
                margin: 0 auto;
                transition: all 0.3s;
            }

            >.num {
                font-size: 32rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: bold;
                color: color-default;
                margin-bottom: 12rpx;
                padding-top: 2rpx;
                line-height: 1;
            }

            >.name {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: color-desc;
                line-height: 1;
            }
        }
    }
</style>